<script>

export default {
  data() {
    return {
      requestParam: {
        username: "",
        password: "",
      },
      loginLoading: false,
      list: ["国家电网", "东电", "职责", "使命", "愿景", "价值观","荣誉"],
    }
  },
  mounted() {
  },
  methods: {
    async login() {
      this.loginLoading = true;
      let requestParam = {
        email:this.requestParam.username,
        password:this.requestParam.password
      }

      this.$kt.requestSecurity.send({
        uri: "/user-account-web/userAccountLogin/loginByEmailAndPassword",
        method: "post",
        data: requestParam,
        stateSuccess: (res) => {
          console.debug("请求成功",JSON.stringify(res));
          this.$kt.requestSecurity.clearKey();
          // 如果不是管理员账号
          // if (!res.data.userAccount?.isAdmin) {
          //   this.$notify({
          //     title: "非管理员账号",
          //     type: 'error'
          //   });
          //   this.loginLoading = false;
          //   return;
          // }

          this.$notify({
            title: res.msg,
            type: 'success'
          });
          this.$kt.request.setToken(res.data.token);
          setTimeout(() => {
            this.$router.push({
              path: "/manage/Body"
            });
            this.loginLoading = false;
          }, 500);
        },
        stateFail: (err) => {
          console.debug("请求失败",JSON.stringify(err));

          this.$notify({
            title: err.errMsg,
            type: 'error'
          });
          this.loginLoading = false;
        }
      })
    },
  }
}

</script>

<template>
  <div class="back">
    <div v-for="item in 100" class="back-logo-box">
      <img class="back-logo" src="/logo.png"/>
    </div>
  </div>
  <div class="box">
    <div class="in-box">

      <div class="logo-box">
        <img class="logo" src="/logo.png" alt="logo"/>
      </div>
      <div style="height: 10px"></div>
      <div class="title">
       KANTBOOT
      </div>
      <div style="height: 10px"></div>
      <div class="form-box">
        <el-form
            ref="ruleFormRef"
            label-position="top" :rules="rules" :model="requestParam">
          <el-form-item
              prop="username"
              label="Username / Email">
            <input
                class="input"
                :disabled="loginLoading"
                @keyup.enter.native="login()"
                placeholder="Username / Email"
                v-model="requestParam.username"></input>
          </el-form-item>
          <el-form-item
              prop="password"
              label="Password">
            <input
                class="input"
                placeholder="Password"
                :disabled="loginLoading"
                type="password"
                @keyup.enter.native="login()"
                v-model="requestParam.password"></input>
          </el-form-item>
        </el-form>
        <div style="height: 10px"></div>
        <el-button
            :loading="loginLoading"
            text
            bg
            @click="login()"
            style="width: 100%;
          font-weight: bold;
          padding: 20px;"
            type="info"
        >Login
        </el-button>
        <div style="height: 10px"></div>
        <div>
          <!-- 忘记密码 -->
          <span class="text-btn"  @click="$router.push({
                path: '/login/forgot'
              })">
            Forgot Password
          </span>
          <!-- 注册 -->
          <span
              @click="$router.push({
                path: '/login/register'
              })"
              class="text-btn" style="float: right">
            Register
          </span>
        </div>
      </div>
      <marquee
          v-if="false"
          behavior="scroll" direction="right" scrollamount="10" scrolldelay="0" loop="-1" width="100%">
      <span
          v-for="item in list"
          :style="{
          'margin':'15px',
        }"
          class="domain">{{ item }}</span>
      </marquee>

    </div>
  </div>

</template>

<style lang="scss" scoped>
.box {
  position: fixed;
  width: 500px;
  padding: 80px;
  box-sizing: border-box;
  //background-color: #ffffff;
  background-color: rgba(255,255,255,.8);
  right: 0;
  top: 0;
  height: 100%;
}

.in-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-box {
  text-align: center;
}

.form-box {
  padding: 20px;
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
}

@keyframes logo {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.title {
  text-align: center;
  font-weight: lighter;
  font-size: 20px;
}

.domain {
  font-size: 12px;
  text-align: center;
  display: inline-block;
  background-color: rgba(0, 0, 0, .1);
  color: #ffffff;
  padding: 10px;
  border-radius: 30px;
  cursor: pointer;
}

.domain:hover {
  background-color: rgba(0, 0, 0, .8);
}

.back{
  position: fixed;
  background-color: rgba(0,0,0,.3);
  width: 100%;
  height: 100%;
}

.back-logo-box{
  position: relative;
  width: 150px;
  height: 150px;
  display: inline-block;
  opacity: .2;

  .back-logo{
    position: absolute;
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}

.back-logo-box:hover{
  opacity: 1;
}

.input {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  background-color: rgba(255,255,255,.5);
}

.input:focus {
  border: 1px solid #409EFF;
}

.text-btn{
  cursor: pointer;
  color: #333333;
  font-size: 12px;
}

.text-btn:hover{
  color: #666666;
}

.text-btn:active{
  color: #999999;
}

</style>